<template>
    <div class="content">
        <el-card class="box-card">
            <el-row>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="数据库">
                        <el-input v-model="db" placeholder="数据库"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                        <el-button type="primary" icon="el-icon-refresh-right" @click="handleClear">重置</el-button>
                        <el-button type="primary" icon="el-icon-circle-plus" @click="handleClick(true)">新增</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="handleBatchDel()">批量删除</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-table ref="multipleTable" :data="pageData.list" border fit style="width: 100%" :header-row-style="() => { return 'line-height:20px';}" highlight-current-row
                :header-cell-style="{ background: 'rgb(55, 60, 100)',color: '#FFFFFF',textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40"> </el-table-column>
                <el-table-column prop="db" label="数据库"></el-table-column>
                <el-table-column prop="description" width="400" label="描述"></el-table-column>
                <el-table-column prop="jdbcUrl" label="JDBC链接（%s主机%d端口%s数据库）"></el-table-column>
                <el-table-column prop="driverClass" label="驱动类全路径"></el-table-column>
                <el-table-column fixed="right" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="text" style="color: red;" icon="el-icon-delete" @click="handleDel(scope.row.db)" size="small">删除</el-button>
                        <el-button type="text" icon="el-icon-edit" @click="handleClick(false,scope.row)" size="small">更新</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.currPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pageData.totalCount">
            </el-pagination>
        </el-card>
        <el-dialog :title="this.form.isAdd ? '新增数据库配置' : '修改数据库配置' " :visible.sync="form.dialogVisible" width="30%">
            <el-form ref="form" label-position="right" :model="form" label-width="auto">
                <el-form-item v-if="this.form.isAdd" label="数据库类型">
                    <el-select v-model="form.dbType" clearable placeholder="请选择数据库类型">
                        <el-option v-for="(item,index) in dbTypes" :key="index" :label="item.dbType + ' | ' + item.desc" :value="item.dbType"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else label="数据库">
                    <el-input v-model="form.db" disabled></el-input>
                </el-form-item>
                <el-form-item label="JDBC链接">
                    <el-input v-model="form.jdbcUrl" placeholder="例如：jdbc:{DB}://%s:%d/%s"></el-input>
                </el-form-item>
                <el-form-item label="驱动类全路径">
                    <el-input v-model="form.driverClass" placeholder="例如：com.mysql.jdbc.Driver"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-circle-plus" @click="handleCommit">提交</el-button>
                    <el-button icon="el-icon-error" @click="form.dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import { dbConfigPage,dbType,dbConfigAdd,dbConfigDel,dbConfigUpdate} from '../../api/db'

    export default {
        mounted() {
            this.getPageList()
            dbType().then((res) => {
                this.dbTypes = res.data
            })
        },
        data() {
            return {
                db: '',
                form: {
                    isAdd:false,
                    dialogVisible: false,
                    db: '',
                    dbType: '',
                    jdbcUrl: '',
                    driverClass: ''
                },
                dbTypes: []
            }
        },
        methods: {
            handleSelectionChange(selection) {
                this.multipleSelection = selection.map(item => item.db);
            },
            handleBatchDel() {
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        type: 'info',
                        message: '请选择需要删除的数据'
                    })
                } else {
                    this.$confirm('确认要删除吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        dbConfigDel(this.multipleSelection).then((res) => {
                            this.$message({ message: '删除成功！', type: 'success' })
                            this.getPageList()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        })
                    })
                }
            },
            handleCommit(){
                if(this.form.isAdd){
                    dbConfigAdd(this.form).then((res)=>{
                        this.$message({
                            message: '新增成功！', type: 'success', duration: 800, onClose: () => {
                                this.handleClear()
                            }
                        })
                     })
                } else {
                    dbConfigUpdate(this.form).then((res)=>{
                        this.$message({
                            message: '修改成功！', type: 'success', duration: 800, onClose: () => {
                                this.handleClear()
                            }
                        })
                     })
                }
          
            },
            handleClear() {
                this.db = ''
                this.form.dialogVisible = false
                this.getPageList()
            },
            getPageList() {
                dbConfigPage(this.db, this.page.page, this.page.limit).then((res) => {
                    this.pageData = res.data
                })
            },
            handleClick(isAdd,dbConfig) {
                this.form.isAdd = isAdd
                this.form.dialogVisible = true
                this.form.dbType = '' 
                this.form.db = isAdd ? '' : dbConfig.db
                this.form.jdbcUrl = isAdd ? '' : dbConfig.jdbcUrl
                this.form.driverClass = isAdd ? '' : dbConfig.driverClass
            }
           
        }
    }
</script>

<style scoped>
.content {
    margin: 20px 0px;
}
.el-table {
    margin: 20px 0px;
}
.el-row {
    margin-bottom: 20px;
    line-height: 10px;
}

.el-form-item {
    margin: 20px 0px;
    font-weight: bold;
    text-align: left;
}
</style>
